<template>
<div>
    <div class="panel">
        <div class="hd">人群说明</div>
        <div class="bd">
            <el-form label-width="180px" size="small" inline-message>
                <el-form-item label="是否区分人群提供服务：">
                    <el-radio-group v-model="isCrowd">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                    <span class="remark-msg" style="margin-left: 20px;">慎重选择，首次提交审核后不允许修改</span>
                </el-form-item>
                <el-form-item label="请选择服务人群：" v-if="isCrowd">
                    <div class="remark-msg">请至少维护一个人群</div>
                    <div class="group-box" v-for="(item,index) in list" :key="item.id">
                        <div class="tit">
                            <div class="check">
                                <el-checkbox v-model="item.checked"></el-checkbox>
                            </div>
                            {{item.name}}：年龄/身高限制
                        </div>
                        <div class="cont">
                            <el-radio-group v-model="item.isRange">
                                <div class="row">
                                    <div class="radio">
                                        <el-radio :label="false">&nbsp;</el-radio>
                                    </div>
                                    <div class="fm">
                                        <div class="it">
                                            <el-input :disabled="item.isRange" v-model="item.form.value" placeholder="" />
                                        </div>
                                        <div class="it">
                                            <el-select :disabled="item.isRange" v-model="item.form.unit" @change="resetValue(index)">
                                                <el-option label="周岁（含）" value="age"></el-option>
                                                <el-option label="厘米（含）" value="stature"></el-option>
                                            </el-select>
                                        </div>
                                        <div class="it">
                                            <el-select :disabled="item.isRange" v-model="item.form.rule">
                                                <el-option label="以上" value="over"></el-option>
                                                <el-option label="以下" value="below"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="radio">
                                        <el-radio :label="true">&nbsp;</el-radio>
                                    </div>
                                    <div class="fm">
                                        <div class="it">
                                            <el-input :disabled="!item.isRange" v-model="item.form.start" placeholder="" />
                                        </div>
                                        <div class="it">
                                            <el-select :disabled="!item.isRange" v-model="item.form.unit" @change="resetValue(index)">
                                                <el-option label="周岁（含）" value="age"></el-option>
                                                <el-option label="厘米（含）" value="stature"></el-option>
                                            </el-select>
                                        </div>
                                        <div class="txt"> - </div>
                                        <div class="it">
                                            <el-input :disabled="!item.isRange" v-model="item.form.end" placeholder="" />
                                        </div>
                                        <div class="txt"> 周岁（含）</div>
                                    </div>
                                </div>
                            </el-radio-group>
                            <div class="result">
                                {{item.name}}：
                                <span v-if="item.isRange">
                                    {{item.form.start}}{{item.form.unit == 'age' ? '周岁（含）' : '厘米（含）'}} -
                                    {{item.form.end}}{{item.form.unit == 'age' ? '周岁（含）' : '厘米（含）'}}
                                </span>
                                <span v-else>
                                    {{item.form.value}}{{item.form.unit == 'age' ? '周岁（含）' : '厘米（含）'}} {{item.form.rule == 'over' ? '以上' : '以下'}}
                                </span>
                            </div>
                        </div>
                    </div>
                    <!--          <el-button style="color: #45c2b5; background: none; border: none; font-size: 14px">+ 添加儿童</el-button>-->
                    <el-form>
                        <el-form-item label="人群补充说明：">
                            <el-input type="textarea" rows="4" style="width: 480px;" v-model="crowdIntro" placeholder="请输入详情信息" maxlength="5000" show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
export default {
  props: ['prodId', 'data'],
  data () {
    return {
      loading: false,
      isCrowd: true,
      crowdIntro: '',
      list: [{
        checked: true,
        name: '成人',
        isRange: false,
        form: {
          type: 'adult',
          start: 0,
          end: 0,
          value: 0,
          rule: 'below',
          unit: 'age'
        }
      },
      {
        checked: true,
        name: '老人',
        isRange: false,
        form: {
          type: 'old',
          start: 0,
          end: 0,
          value: 0,
          rule: 'below',
          unit: 'age'
        }
      },
      {
        checked: true,
        name: '婴儿',
        isRange: false,
        form: {
          type: 'baby',
          start: 0,
          end: 0,
          value: 0,
          rule: 'below',
          unit: 'age'
        }
      },
      {
        checked: true,
        name: '儿童',
        isRange: false,
        form: {
          type: 'child',
          start: 0,
          end: 0,
          value: 0,
          rule: 'below',
          unit: 'age'
        }
      }
      ]
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      const {
        crowdList,
        customization: {
          crowdIntro,
          isCrowd
        }
      } = this.data
      if (crowdList && crowdList.length > 0) {
        this.isCrowd = true
      }
      this.crowdIntro = crowdIntro
      this.isCrowd = isCrowd
      let _item = {}
      const types = []
      crowdList.map(item => {
        types.push(item.type)
        const {
          end,
          rule,
          sort,
          start,
          type,
          unit,
          value
        } = item
        _item = this.list[{
          adult: 0,
          old: 1,
          baby: 2,
          child: 3

        }[item.type]]
        _item.checked = true
        if (item.rule === 'range') {
          _item.isRange = true
        }
        _item.form = {
          end,
          rule,
          sort,
          start,
          type,
          unit,
          value
        }
        this.$set(this.list, {
          adult: 0,
          old: 1,
          baby: 2,
          child: 3
        }[item.type], _item)
      })
      // 处理人群数据
      if (types.length > 0) {
        this.list.forEach((value, index) => {
          if (!types.includes(value.form.type)) {
            value.checked = false
          } else {
            value.checked = true
          }
        })
      } else {
        // 默认不选中
        this.list.map(value => {
          value.checked = false
        })
      }
    },
    resetValue (idx) {
      const item = this.list[idx]
      item.form.value = 0
      this.$set(list.idx, item)
    },
    submit () {
      const list = []
      for (const i in this.list) {
        if (this.list[i].checked) {
          const item = JSON.parse(JSON.stringify(this.list[i].form))
          for (const j in item) {
            if (item.unit === 'age' && (j === 'value' || j === 'start' || j === 'end')) {
              console.log('打印', (/^\d+(?=\.{0,1}\d+$|$)/.test(item[j])))
              if (!(/^[1-9]\d*|0$/.test(item[j]))) {
                this.$message({
                  message: '请输入非负整数',
                  type: 'warning'
                })
                return
              }
            }
          }
          item.rule = this.list[i].isRange ? 'range' : item.rule
          item.customizationId = this.prodId
          list.push(item)
        }
      }
      const sd = {
        crowdIntro: this.crowdIntro,
        isCrowd: this.isCrowd,
        customizationCrowdList: this.isCrowd ? list : [],
        customizationId: this.prodId
      }
      console.log('打印sd', sd)
      this.loading = true
      this.$http.put('/customization/crowd', sd).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        const nextId = 4
        this.$emit('changeSubMenu', nextId)
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.remark-msg {
    color: #999;
}

.group-box {
    background: #f7f7f7;
    padding: 10px 20px;
    margin-bottom: 20px;

    .tit {
        .check {
            display: inline-block;
            margin-right: 20px;
        }
    }

    .cont {
        padding-left: 40px;

        .row {
            display: flex;
            margin-bottom: 10px;

            .radio {
                width: 16px;
                line-height: 32px;
                margin-right: 16px;
                height: 32px;
                overflow: hidden;
                display: flex;
                align-items: center;
            }

            .fm {
                flex: 1;

                .it {
                    display: inline-block;
                    width: 120px;
                    margin-right: 10px;
                    line-height: 32px;
                    height: 32px;
                }

                .txt {
                    padding: 0 10px;
                    display: inline-block;
                    color: #333;
                    line-height: 32px;
                    height: 32px;
                    font-size: 14px;
                }
            }
        }

        .result {
            background: #fff;
            border-radius: 4px;
            padding: 0 10px;
            width: 420px;
        }
    }
}
</style>
